<template>
    <view>
        <!-- 导航条 -->
		<u-navbar height="60" bgColor="#0081ff">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-nav-slot margin-top-xl" slot="left">
			</view>
			<!-- #endif -->
			<view slot="center" class="u-nav-slot">
				<view style=" font-size: 20px; color: #FFFFFF;">添加定时任务</view>
			</view>
		</u-navbar>

        <view>
            <view>
                <view class="padding-sm text-xxl ">选择执行动作</view>
                <view>
                    <scroll-view class="uni-swiper-tab uni-scroll-view flex justify-center align-center" scroll-x="true" scroll-left="120"
                        cancelable="false">
                        <view v-for="(item,index) in buttonList" :key="index" class="scrollx_items" >
                            <view class="padding bg-white text-center light  device-list"
                                :class="item.checked == true? 'bg-blue': ''" @tap="select(item.buttonId)">
                                <image class="margin-top-sm" :src="imgUrl + item.image" style="width: 5vh;height: 5vh;">
                                </image>
                                <text class="margin-top-sm">{{item.buttonName}}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view>
                <view class="padding-sm margin-top-sm text-xxl flex">设定执行指令：
                    <radio-group class="block flex margin-left-sm" @change="RadioChange">
                        <view class="flex">
                            <view class="title">开启</view>
                            <radio class="margin-left-sm"  :class="radio=='open'?'checked':''" :checked="radio=='open'?true:false" value="open">
                            </radio>
                        </view>
                        <view class="flex margin-left-sm">
                            <view class="title">关闭</view>
                            <radio class="margin-left-sm" :class="radio=='off'?'checked':''" :checked="radio=='off'?true:false" value="off">
                            </radio>
                        </view>
                    </radio-group>
                </view>
            </view>
            <view>
                <view class="padding-sm margin-top-sm text-xxl ">设定执行时间</view>
                <view class=" text-sl bg-white" style="border: #FFFFFF solid 2rpx;">
                    <picker class="margin-left-xl" mode="time" :value="time" start="0:0" end="23:59"
                        @change="TimeChange">
                        <view class="picker">
                            {{time}}
                        </view>
                    </picker>
                </view>
            </view>
            <view>
                <view class="padding-sm margin-top-sm text-xxl ">重复设置</view>
                <view class=" text-sm">
                    <checkbox-group class="block flex justify-center" @change="CheckboxChange">
                        <view style="margin-left: 30rpx;" v-for="(item,index) in checkbox" :key="index">
                            <view class="title">{{item.name}}</view>
                            <checkbox class="round margin-top-sm" :class="item.checked?'checked':''"
                                :checked="item.checked?true:false" :value="item.value"></checkbox>
                        </view>
                    </checkbox-group>
                </view>
            </view>
        </view>

        <view class="flex  justify-center cu-bar tabbar bg-white shadow foot" @tap="saveTask">
            <view class="text-blue text-xl">完成设定</view>
        </view>
		
    </view>
</template>

<script>
    export default {
        data() {
            return {
				imgUrl: this.imgUrl,
                deviceId: null,
                buttonList: null,
                selectId: null, // 选择的按钮的ID
                time: '00:00',
                radio: null,
                cron:[],
                checkbox: [{
                    value: 'SUN',
                    name: '星期日',
                    checked: false
                }, {
                    value: 'MON',
                    name: '星期一',
                    checked: false
                }, {
                    value: 'TUE',
                    name: '星期二',
                    checked: false
                }, {
                    value: 'WED',
                    name: '星期三',
                    checked: false
                }, {
                    value: 'THU',
                    name: '星期四',
                    checked: false
                }, {
                    value: 'FRI',
                    name: '星期五',
                    checked: false
                }, {
                    value: 'SAT',
                    name: '星期六',
                    checked: false
                }],
            }
        },
        onLoad(option) {
            this.deviceId = option.deviceId
            this.getButtonList()
        },
        methods: {
            // 保存定时设置
            saveTask() {
                if (this.selectId != null && this.radio != null ){
                    this.$http.request({
                        url:  'app/task/setButtonTask',
                        method: 'POST',
                        data: {
                            'deviceId': this.deviceId,
                            'buttonId': this.selectId,
                            'instruct': this.radio,
                            'time': this.time,
                            'cron': this.cron
                        },
                        success: (data) => {
                            if (data.data && data.data.code == 0) {
                                uni.navigateBack({
                                    delta:1
                                })
                            }
                        }
                    })
                    this.cron.splice(0,this.cron.length);
                }else{
                    uni.showToast({
                        title: "请补全相关参数后，再设置定时",
                        icon:"none",
                        position: 1000
                    })
                }
            },
            //设置选择的按钮
            select(buttonId) {
                var items = this.buttonList
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    items[i].checked = false;
                    if (items[i].buttonId == buttonId) {
                        this.selectId = buttonId
                        items[i].checked = true;
                    } else {
                        items[i].checked = false;
                    }
                }
                this.buttonList = items
            },
            //获取设备对应的按键列表
            getButtonList() {
                this.$http.request({
                    url:  'app/button/listAll/',
                    method: 'GET',
                    data: {
                        'deviceId': this.deviceId
                    },
                    success: (data) => {
                        if (data.data && data.data.code == 0) {
                            let list = data.data.list
                            for (var i = 0; i < list.length; i++) {
                                list[i].checked = false
                            }
                            this.buttonList = list
                        }
                    }
                })
            },
            //获取时间
            TimeChange(e) {
                this.time = e.detail.value
            },
            // 选择执行的指令
            RadioChange(e) {
                this.radio = e.detail.value
            },
            // 选择星期
            CheckboxChange(e) {
                var items = this.checkbox,
                    values = e.detail.value;
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    items[i].checked = false;
                    for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
                        if (items[i].value == values[j]) {
                            items[i].checked = true;
                            this.cron =values
                            break
                        }
                    }
                }
            },
        }
    }
</script>

<style>
    .device-list {
        width: 7rem;
        height: 7rem;
        border: #DDDDDD solid 2px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* 二级菜单设置左右滑动 */
    .uni-swiper-tab {
        white-space: nowrap;
    }

    .scrollx_items {
        display: inline-block;
        box-sizing: border-box;
        margin-left: 10rpx;
        margin-top: 3px;
    }

    .uni-scroll-view {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
</style>
